<template>
  <div class="message" :class="[type]">{{msg}}</div>
</template>

<script>
export default {
  name: 'Message',
  props: {
    type: {
      type: String,
      default: 'info'
    },
    msg: {
      type: String,
      default: ''
    }
  },
  mounted () {
    setTimeout(() => {
      this.$destroy() // 手动销毁
      document.body.removeChild(this.$el)
    }, 3000)
  }
}
</script>

<style lang="scss" scoped>
.message {
  @include wh(100%, auto);
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  color: #fff;
  font-size: $font-size-m;
  padding: 40px;
  text-align: center;
  &.error {
    background: #f00;
  }
  &.success {
    background: green;
  }
}
</style>
